import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { ProCard } from '@ant-design/pro-components';
import { useDispatch } from 'dva';

import ButtonList from './components/ButtonList';
import FixedOperation from './components/FixedOperation';
import GroupTagModal from './components/GroupTagModal';
import GroupTagSearchItem from './components/GroupTagSearchItem';
import useCrowdInfoToReduxInfo from './hooks/useCrowdInfoToReduxInfo';
import useDimTagList from './hooks/useDImTagList';

const LabelMarket = () => {
  const dispatch = useDispatch();
  const dims = useSelector((state) => state.label.dims);
  const [selectedDimId, setSelectedDimId] = useState(null);
  const [groupTagItem, setGroupTagItem] = useState(null);
  const [visible, setVisible] = useState(false);
  const selectGroupTag = (payload) => {
    dispatch({ type: 'label/selectGroupTag', payload });
  };
  useCrowdInfoToReduxInfo();
  const { drawerComponent } = useDimTagList({
    dimId: selectedDimId,
    setSelectedDimId,
    groupTagItem, // 进行搜索的标签的信息
  });
  useEffect(() => {
    dispatch({ type: 'label/loadDims' });
  }, [dispatch]);

  return (
    <>
      <ProCard ghost>
        <GroupTagSearchItem
          setGroupTagItem={setGroupTagItem}
          openModal={() => {
            setVisible(true);
          }}
        />
        {dims && (
          <ButtonList
            dims={dims}
            selectedDimId={selectedDimId}
            handleChangeSelectDim={setSelectedDimId}
          />
        )}
      </ProCard>
      {drawerComponent}
      <GroupTagModal
        visible={visible}
        onClose={() => setVisible(false)}
        groupTagInfo={groupTagItem}
        selectGroupTag={selectGroupTag}
        dimId={selectedDimId}
      />
      <FixedOperation />
    </>
  );
};

export default LabelMarket;
